<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        表单默认提交到action指定的地址，如果地址为空，提交到当前页面
        能够触发form提交的按钮写法

    -->
    <form action="http://baidu.com">
        <input type="text" name="" id=""><br>
        <!-- 能够触发表单提交的按钮 -->
        <button>提交</button>
        <button type="submit">提交2</button>
        <input type="submit" value="提交3">
        <!-- 不能触发表单提交的按钮 -->
        <button type="button">不能提交</button>
    </form>

    <script>
        /**
         * 阻止按钮的和阻止form的都可以阻止表单的默认提交行为
         */
        var oBtn = document.querySelectorAll('button')[0];
        oBtn.onclick = function(e){
            e = e || window.event;
            // 提交按钮阻止默认行为
            e.preventDefault();
            console.log('button submit');
        }

        var oForm = document.querySelector('form');

        oForm.onclick = function(e){
            e = e || window.event;
            console.log('form submit');
            e.preventDefault();
        }
    </script>
</body>
</html>